<template>
  <div class="max-w-5xl mx-auto">
    <div class="flex justify-between py-3">
      <h1 class="text-2xl font-semibold">
        <NuxtLink to="/"> 咸鱼 </NuxtLink>
      </h1>

      <nav>
        <ul class="flex items-center">
          <li v-for="item of menus" :key="item.id" class="mr-3 last:mr-[0]">
            <NuxtLink :to="item.url">
              {{ item.name }}
            </NuxtLink>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        {
          id: 0,
          name: '归档',
          url: '/archives',
        },
        {
          id: 1,
          name: '关于',
          url: '/about',
        },
      ],
    };
  },
};
</script>
